import { Input, Form, Button, Table, Space, message, Modal } from 'antd';
import { getRoomList, deleteRoomByid, updateRoom } from '@/services/api/room/room';
import { columns } from './tableConfig';
interface FormDataProps {
  name: string;
  capacity: string;
}
export default function Room() {
  const [tableData, setTableData] = useState([]);
  const [page, setPage] = useState({ pageNo: 1, pageSize: 10, total: 0 });
  const [formData, setFormData] = useState<FormDataProps>();
  const [updateFormData, setUpdateFormData] = useState<Record<string, string>>();
  const [form] = Form.useForm();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const pages = {
    pageSize: page.pageSize,
    total: page.total,
    onChange(pages: any, pageSize: any) {
      setPage(() => {
        return { ...page, pageNo: pages, pageSize };
      });
    },
  };
  useEffect(() => {
    query();
  }, [page.pageNo, formData]);

  const query = async () => {
    const params = { ...page, ...formData };
    const res = await getRoomList(params);
    if (res.code === 200) {
      setTableData(res.data.lists);
      setPage({ ...page, total: res.data.totalCount });
    }
  };
  const onFinish = (values: any) => {
    // console.log(values);
    setFormData({ ...values });
    // query();
  };
  const editRoom = (record: any) => {
    setUpdateFormData(() => {
      return { ...record };
    });
    // useEffect(() => {
    //   form.setFieldValue({ ...record }, [form]);
    // }, []);
    setIsModalOpen(true);
  };
  const deleteRoom = async (record: any) => {
    const res = await deleteRoomByid({ id: record.id });
    if (res.code === 200) {
      message.success('删除成功');
      query();
    }
  };
  async function onFinishRoom(values: any) {
    const params = {
      ...updateFormData,
      ...values,
    };
    const res = await updateRoom(params);
    if (res.code === 200) {
      message.success('修改成功');
      query();
      setIsModalOpen(false);
    }
  }
  return (
    <div>
      <div className=" p-4">
        <Form
          onFinish={onFinish}
          colon={false}
          autoComplete="off"
          style={{ display: 'flex', flexDirection: 'row', gap: '1rem' }}
        >
          <Form.Item label="名称" name="name">
            <Input></Input>
          </Form.Item>
          <Form.Item label="容量" name="capacity">
            <Input></Input>
          </Form.Item>
          <Form.Item>
            <Button className="w-full" type="primary" htmlType="submit">
              查询
            </Button>
          </Form.Item>
        </Form>
      </div>
      <div style={{ height: '100%' }}>
        <Table
          rowKey={'id'}
          pagination={pages}
          columns={columns.concat([
            {
              title: '操作',
              key: 'action',
              align: 'center',
              render: (_, record) => {
                return (
                  <Space size="middle">
                    <Button
                      type="primary"
                      onClick={() => {
                        editRoom(record);
                      }}
                    >
                      编辑
                    </Button>
                    <Button
                      type="primary"
                      danger
                      onClick={() => {
                        deleteRoom(record);
                      }}
                    >
                      删除
                    </Button>
                  </Space>
                );
              },
            },
          ])}
          dataSource={tableData}
          scroll={{ y: 600 }}
        />
        <Modal open={isModalOpen} footer={null} onCancel={() => setIsModalOpen(false)}>
          <Form form={form} onFinish={onFinishRoom} colon={false} autoComplete="off">
            <Form.Item label="名称" name="name">
              <Input></Input>
            </Form.Item>
            <Form.Item label="容量" name="capacity">
              <Input></Input>
            </Form.Item>
            <Form.Item label="位置" name="location">
              <Input></Input>
            </Form.Item>
            <Form.Item label="设备" name="equipment">
              <Input></Input>
            </Form.Item>
            <Form.Item>
              <Button className="w-full" type="primary" htmlType="submit">
                保存
              </Button>
            </Form.Item>
          </Form>
        </Modal>
      </div>
    </div>
  );
}
